<template>
  <PageWrapper>
    <template #headerContent>
      <WorkbenchHeader />
    </template>
    <div style="background-color: #f3f1f1; padding: 15px">
      <Row :gutter="16">
        <Col :span="6" v-for="machineItem in machineList" :key="machineItem.machineId">
        <Card class="box-card" :title="machineItem.machineType" :bordered="false"
          @click="navigateToMachineConfig(machineItem.machineId, machineItem.deviceSN)">
          <template #cover>
            <div class="cover-container">
              <img class="screenImg" src="../../../assets/machine/screenOne.png" />
            </div>
          </template>
          <CardMeta :title="machineItem.machineName" style="text-align: center;">
            <template #description>
              <div class="right-align">
                <span>负责人：{{ machineItem.adminName }} </span>
                <span>{{ machineItem.adminPhone }}</span>
              </div>
            </template>
          </CardMeta>
        </Card>
        </Col>
      </Row>
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { PageWrapper } from "/@/components/Page";
import WorkbenchHeader from "./components/WorkbenchHeader.vue";
import { ListApi as ListMachineApi } from "/@/api/machine/machine";
import { MachineInfo } from "/@/api/machine/model/machine";
import { useRouter } from "vue-router";
import {
  Card,
  CardMeta,
  Row,
  Col
} from "ant-design-vue";

const machineList = ref<Array<MachineInfo>>([]);
const router = useRouter();

const listSensor = async () => {
  machineList.value = await ListMachineApi();
};

const navigateToMachineConfig = (machineId: string | number, deviceSN: string) => {
  router.push({ name: "MachineConfig", params: { machineId, deviceSN } });
};

onMounted(() => {
  listSensor();
});

</script>
<style lang="less" scoped>
.cover-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.screenImg {
  width: 70%;
  height: auto;
  object-fit: contain;
}

.box-card {
  border: 2px solid #adaaaa;
  box-shadow: 0px 0px 5px #adaaaa;
  border-radius: 10px;
}
</style>
